<template>
  <div class="menu_box">
    <!-- <div class="del_box" @click="isCollapse = !isCollapse">
          <el-icon v-if="isCollapse">
              <ArrowLeftBold />
          </el-icon>
          <el-icon v-else>
              <ArrowRightBold />
          </el-icon>
      </div> -->
    <el-menu class="el-menu-vertical-demo" :collapse="isCollapse" background-color="#fff" active-text-color="#000"
      text-color="#000" collapse-transition="false" @open="handleOpen" @select="handleSelect" @close="handleClose"
      unique-opened="true" :router="true" :default-active="defaultPath">
      <section v-for="(item, index) in list">
        <el-sub-menu v-if="item.children.length > 0" :index="index + 1">
          <template #title>
            <el-icon>
              <component :is="item.icon" />
            </el-icon>
            <span>{{ item.label }}</span>
          </template>
          <el-menu-item class="m-menu" v-for="(it, idx) in item.children" :index="it.path" @click="addPathHandle(it)">{{
      it.label
    }}</el-menu-item>
        </el-sub-menu>
        <el-menu-item v-if="item.children.length == 0" :index="item.path" @click="addPathHandle(item)">
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <template #title>
            <span>{{ item.label }}</span>
          </template>
        </el-menu-item>
      </section>
    </el-menu>
  </div>
</template>

<script>
import { httpService } from "@/utils/httpService";
import { ElMessage, ElForm, } from "element-plus";
import { mapState, mapActions } from 'vuex';
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
  Avatar,
  User, ChatDotRound, Monitor, Delete,
  Guide,
  Wallet, OfficeBuilding, Headset,
  Medal, Histogram, CreditCard, FolderDelete, ArrowRightBold, ArrowLeftBold,Stamp,
  Sunrise, Postcard, HelpFilled, Van, School, FolderChecked, Memo, Collection, DocumentChecked,
} from "@element-plus/icons-vue";

export default {
  name: "Header",
  data() {
    return {
      isCollapse: false,
      list: [],
      flagId: 1,
      // defaultPath1: ""
    };
  },

  components: {
    Location,
    Document, ChatDotRound, Headset,
    IconMenu, Histogram, Monitor, Delete,
    Setting,
    Avatar,
    User,
    Guide,
    Wallet, ArrowRightBold, ArrowLeftBold,
    Medal, OfficeBuilding, CreditCard, FolderDelete,Stamp,
    Sunrise, Postcard, HelpFilled, Van, School, FolderChecked, Memo, Collection, DocumentChecked,
  },
  computed: {
    ...mapState(['navMenuList', 'isCollapse1', 'defaultPath']), // 映射仓库中的状态到组件
    isCollapse() {
      return this.isCollapse1
    },
  },
  mounted() {
    this.getTreeData();
  },
  methods: {
    ...mapActions(['uploadAdd']),
    addPathHandle(data) {
      this.uploadAdd(data)
    },
    handleOpen(key, keyPath) { },
    handleClose(key, keyPath) { },
    handleSelect(index, indexPath) { },
    openOrClose() {
      if (this.isCollapse) {
        this.isCollapse = false;
      } else {
        this.isCollapse = true;
      }
    },
    getTreeData() {
      httpService("/javaApi/baseMenu/queryMyTree", { "systemCode": "1008" }, "get").then((data) => {
        this.list = data[0].children;
      });
    },
  },
};
</script>

<style>
.menu_box {
  position: relative;
}

.del_box {
  width: 25px;
  height: 40px;
  position: absolute;
  background-color: #adadad !important;
  z-index: 99;
  top: 50%;
  transform: translateY(-50%);
  right: -25px;
  border-radius: 0 25px 25px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.del_box .el-icon {
  margin-left: -5px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  /* width: 240px; */
  min-height: calc(100vh - 60px);
  padding: 10px;
  /* back dground: coral; */
}

.el-menu--collapse {
  min-height: calc(100vh - 60px);
}

.el-aside {
  transition: width 0.05s;
  -webkit-transition: width 0.05s;
  -moz-transition: width 0.05s;
  -webkit-transition: width 0.05s;
  -o-transition: width 0.05s;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  /* width: 240px; */
  height: 100%;
}

.el-menu-item.is-active {
  /* color: #409EFF;
  background: white; */
  background-color: #007EFF;
  color: #fff;
  border-radius: 3px;
}

.m-menu.is-active {
  /* color: #409EFF;
  background: white; */
  padding-left: 40px !important;
  background-color: #007EFF;
  color: #fff;
  border-radius: 3px;
}

/* .m-menu:before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  border: 1px solid #444;
  position: absolute;
  left: 25px;
  top: 23px;
}

.m-menu.is-active:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background: #409EFF;
  position: absolute;
  left: 25px;
  top: 23px;
} */

.el-menu--collapse .el-sub-menu__title span {
  display: none;
}

.el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
  display: none;
}
</style>